<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>AAL Atlas</title>
    <link rel="stylesheet" href="niivue.css" />
    <link rel="icon" href="data:;base64,iVBORw0KGgo=" />
  </head>
  <body>
    <noscript>niivue requires JavaScript.</noscript>
    <header>
      <label for="interpCheck">Jagged</label>
      <input type="checkbox" id="interpCheck" checked />
      &nbsp;
      <label for="statAlphaSlider">Stats Opacity</label>
      <input
        type="range"
        min="1"
        max="255"
        value="196"
        class="slider"
        id="statAlphaSlider"
      />
      &nbsp;
      <label for="atlasAlphaSlider">Atlas Opacity</label>
      <input
        type="range"
        min="1"
        max="255"
        value="32"
        class="slider"
        id="atlasAlphaSlider"
      />
      &nbsp;
      <label for="atlasOutlineSelect">Atlas Outline</label>
      <select id="atlasOutlineSelect">
        <option value="0">None</option>
        <option value="0.01" selected>Gap</option>
        <option value="1">Opaque</option>
        <option value="-1">Black</option>
      </select>
      &nbsp;
      <label for="padSlider">Padding</label>
      <input
        type="range"
        min="0"
        max="10"
        value="5"
        class="slider"
        id="padSlider"
      />
      &nbsp;
      <label for="gapSlider">Crosshair Gap</label>
      <input
        type="range"
        min="0"
        max="36"
        value="12"
        class="slider"
        id="gapSlider"
      />
      &nbsp; &nbsp;
      <label for="renderMode">Render Mode</label>
      <select id="renderMode">
        <option value="-1">slices</option>
        <option value="0" selected>matte</option>
        <option value="0.3">low</option>
        <option value="0.6">medium</option>
        <option value="1.0">high</option>
      </select>
      &nbsp;
      <button id="aboutBtn">About</button>
    </header>
    <main>
      <canvas id="gl1"></canvas>
    </main>
    <footer id="locationx"><span id="hover"></span>&nbsp;<span id="location"></span></footer>
    <script type="module" async>
      import * as niivue from "../dist/index.js"
      var volumeList1 = [
        {url: "../images/mni152.nii.gz"},
        {
          url: "../images/spmMotor.nii.gz",
          colormap: "hot",
          cal_min: 3,
          cal_max: 8,
        },
        {url: "../images/aal.nii.gz"},
      ]
      function handleLocationChange(data) {
        document.getElementById("location").innerHTML = 'Clicked: '+data.string
      }
      statAlphaSlider.oninput = function () {
        nv1.setOpacity(1, this.value / 255)
      }
      atlasAlphaSlider.oninput = function () {
        nv1.setOpacity(2, this.value / 255)
      }
      atlasOutlineSelect.onchange = function () {
        nv1.setAtlasOutline(parseFloat(this.value))
      }
      padSlider.oninput = function () {
        nv1.setMultiplanarPadPixels(this.value)
      }
      gapSlider.oninput = function () {
        nv1.opts.crosshairGap = this.value
        nv1.updateGLVolume()
      }
      interpCheck.onchange = function () {
        nv1.setInterpolation(this.checked)
      }
      renderMode.onchange = function () {
        nv1.setVolumeRenderIllumination(parseFloat(this.value))
      }
      aboutBtn.onclick = function () {
         window.alert("Automated anatomical labelling (AAL) atlas PMID: 31521825")
      }
      var nv1 = new niivue.Niivue({show3Dcrosshair: true, backColor: [0.5, 0.5, 0.5, 1], onLocationChange: handleLocationChange })
      await nv1.attachTo("gl1")
      nv1.setInterpolation(true)
      nv1.opts.crosshairGap = 12
      nv1.opts.multiplanarShowRender = niivue.SHOW_RENDER.ALWAYS
      nv1.opts.dragMode = nv1.dragModes.pan
      nv1.opts.yoke3Dto2DZoom = true
      await nv1.loadVolumes(volumeList1)
      async function fetchJSON(fnm) {
        const response = await fetch(fnm)
        const js = await response.json()
        return js
      }
      let cmap = await fetchJSON("../images/aal.json")
      nv1.volumes[2].setColormapLabel(cmap)
      let clut = nv1.volumes[2].colormapLabel.lut
      nv1.setMultiplanarPadPixels(5)
      nv1.setRenderAzimuthElevation(290, 30)
      nv1.scene.crosshairPos = nv1.mm2frac([26,-40,70])
      statAlphaSlider.oninput()
      atlasAlphaSlider.oninput()
      atlasOutlineSelect.onchange()
      renderMode.onchange()
      let activeIdx = - 1
      gl1.addEventListener("mousemove", (e) => {
        let pos = nv1.getNoPaddingNoBorderCanvasRelativeMousePosition(e, nv1.gl.canvas)
        const frac = nv1.canvasPos2frac([pos.x  * nv1.uiData.dpr, pos.y  * nv1.uiData.dpr])
        if (frac[0] >= 0) {
          let mm = nv1.frac2mm(frac)
          //console.log(mm[0])
          const vox = nv1.volumes[2].mm2vox(mm)
          let idx = nv1.volumes[2].getValue(vox[0], vox[1], vox[2])
          if ((isFinite(idx)) && (idx !== activeIdx)) {
            activeIdx = idx
            nv1.opts.atlasActiveIndex = activeIdx
            nv1.updateGLVolume()
            document.getElementById("hover").innerHTML = 'Hover: '+ cmap.labels[idx]
          }
        }
      })
    </script>
  </body>
</html>
